<template>
  <div
    v-if="equ === 'pc'"
    v-show="config.currentUser"
    class="poster-view"
  >
    <template v-if="show">
      <div
        class="close flc cursor-pointer z-20"
        @click="onClose"
      >
        <img src="@/assets/icons/pc/pc-close.png" />
      </div>
      <poster-base-view :source-data="cfg" />
    </template>
  </div>
  <div
    v-else
    v-show="config.currentUser"
    class="poster-mobile"
  >
    <div
      v-show="show"
      class="content"
    >
      <poster-base-view :source-data="cfg" />
      <button
        class="close-btn"
        @click="onClose"
      >
        <icon-font name="close" />
      </button>
    </div>
  </div>
</template>
<script lang="ts" name="PosterView" setup>
import { useConfigStore } from '@/store/config'
import { equ } from '../../../../package-env';
import { useTtsaStore } from '@/store/ttsa'
import { closeSome } from '@/utils/comps';

const ttsa = useTtsaStore()

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  cfg: {
    required: false,
    type: Object,
  }
});
const config: any = useConfigStore();
const show = ref(false);
const emit = defineEmits(['unmount']);
const onClose = () => {
  emit('unmount');
  show.value = false;
  const { jump_type, content_id, content_node_id } = props.cfg?.event_click || {}
  if (jump_type && !content_id && !content_node_id) {
    ttsa.next(ttsa.peekBackInfo)
  } else {
    props.cfg?.handEvent?.();
  }
}

onBeforeMount(() => {
  closeSome()
  show.value = true;
})

</script>
<style scoped lang="scss">
.poster-mobile {
  @apply fixed top-0 left-0 right-0 bottom-0 z-10086 text-white h-full w-full overflow-hidden;
  background-color: rgba(0, 0, 0, 0.1);

  .content {
    @apply absolute top-[20%] left-[50%] flex flex-col items-center z-1;
    transform: translate(-53%, -20%);
    width: 328px;
    max-height: 475px;

    .close-btn {
      @apply absolute flc;
      width: 34.5px;
      height: 34.5px;
      border: 1px solid #ffffff;
      border-radius: 50%;
      bottom: -50px;
      font-size: 16.5px;

      &:active {
        opacity: 0.6;
      }
    }
  }
}

.poster-view {
  @apply absolute z-100;
  left: 50%;
  top: 10%;
  transform: translateX(-97%);
  width: auto;
  height: auto;

  .close {
    @apply absolute cursor-pointer;
    height: 24px;
    width: 24px;
    top: 24px;
    right: -9px;
    border-radius: 50%;
    font-size: 17px;
  }

  .content {
    @apply h-full w-full relative;
    padding: 25px 26px 30px;
  }
}

@media screen and (min-width: 1440px) {
  .poster-view {
    top: 134px;
    transform: translateX(-107.5%);
  }
}
</style>